<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>消息--通知</title>
    <link rel="icon" type="images/x-icon" href="img/icons/favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/notify.css">
</head>
<body>
<!--头部 开始-->
<div class="SY-header pf">
    <div class="clearfix">
        <div class="SY-logo fl usn">
            <a href="UserCenter.html"><img src="img/icons/logo.png" alt="深夜学院"><span class="slogin">深夜研习社</span></a>
        </div>
        <div class="SY-search pa dib">
            <div class="inputField">
                <input type="text" class="SY-input tac" placeholder="请输入作者名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入作者名'">
                <a href="javascript:void(0);" class="search-icon pa"><i class="fa fa-search"></i></a>
            </div>
            <div class="searchTips pa dn">
                <div class="searchReferral dn">
                    <div class="searchRecent">
                        <p class="title">最近搜索</p>
                        <ul class="clearfix">
                            <li class="worker dib fl"><a href="javascript:void(0);"><span>大石头</span>CG</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">Eric Zhang</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                        </ul>
                    </div>
                    <div class="searchHot">
                        <p class="title">热门搜索</p>
                        <ul class="clearfix">
                            <li class="worker dib fl"><a href="javascript:void(0);">大石头CG</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">Eric Zhang</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                            <li class="worker dib fl"><a href="javascript:void(0);">作者名称</a></li>
                        </ul>
                    </div>
                </div>
                <div class="searchResult">
                    <ul class="d n">
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>123</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>designer</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>icon</a></li>
                        <li class="worker title">创作者</li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>CG</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>老师</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>老板</a></li>
                        <li class="worker"><a href="javascript:void(0);"><span>大石头</span>boss</a></li>
                    </ul>
                    <div class="checkMore tac d n">
                        <a href="javascript:void(0);">查看全部搜索结果<i class="fa fa-angle-double-right"></i></a>
                    </div>
                    <!--缺省提示-->
                    <div class="emptyInfo tac dn">
                        <p class="tips">暂未找到您想要查找的作,去<a href="MoreWorker.html">分类</a>查找更多作者吧!</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="SY-topRight fr">
            <ul class="clearfix">
                <li class="SY-create fr">
                    <a href="Post.html"><span>创作</span></a>
                </li>
                <li class="SY-userPic fr">
                    <a href="UserCenter.html">
                        <img class="br50" src="img/icons/person.png" alt="userPic">
                        <object><a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a></object>
                    </a>
                    <div class="pa tac fold">
                        <span class="pa trigon"></span>
                        <ul>
                            <li class="myPage"><a href="UserPageNew.html">我的研习社</a></li>
                            <li class="myPage"><a href="http://www.shenyecg.com" target="_blank">深夜学院</a></li>
                            <li class="authentication"><a href="CareerAuthen.html">深夜认证</a></li>
                            <li class="wallet"><a href="MyWallet.html">钱包</a></li>
                            <li class="setting"><a href="UserSetting.html">设置</a></li>
                            <li class="SY-exit">
                                <a href="javascript:void(0);"><i></i>退出</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="SY-regLog fr dn">
                    <a href="javascript:void(0);">注册</a>
                    <a href="javascript:void(0);">登录</a>
                </li>
                <li class="SY-notify active fr">
                    <a href="Notify.html"><i></i><span class="num pa">99+</span></a>
                    <div class="pa fold">
                        <span class="pa trigon"></span>
                        <p class="topBox clearfix">
                            <span class="text fl">消息盒子</span>
                            <a href="javascript:void(0);" class="emptyBtn fr">清空</a>
                        </p>
                        <ul class="">
                            <li><a href="javascript:void(0);">[系统]管理员审核通过了你发表的原创作品《路人甲》</a></li>
                            <li><a href="javascript:void(0);">[私信]路人甲给你发来了1条私信</a></li>
                            <li><a href="javascript:void(0);">[通知]路人甲关注了你</a></li>
                        </ul>
                        <!--缺省提示-->
                        <div class="emptyInfo tac dn">
                            <p class="tips">暂无消息</p>
                        </div>
                        <div class="checkAll">
                            <a class="db tac" href="Notify.html">查看全部&nbsp;>></a>
                        </div>
                    </div>
                </li>
                <li class="fr line"></li>
                <li class="SY-focus dn fr">
                    <a href="UserCenter.html"><i></i><span>关注</span></a>
                </li>
                <li class="SY-Recruit fr">
                    <a href="Recruit.html"><i></i><span>招聘</span></a>
                    <span class="event db pa new"></span>
                </li>
                <li class="SY-piazza fr">
                    <a href="SquareNew.html"><i></i><span>广场</span></a>
                </li>
                <li class="SY-CG fr dn">
                    <a href="http://www.shenyecg.com" target="_blank"><i></i><span>学院</span></a>
                </li>
                <li class="SY-index fr dn">
                    <a href="Index.html"><i></i><span>首页</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--头部 结束-->
<!--主内容 开始-->
<div class="SY-content pr">
    <div class="SY-setContent">
        <div class="SY-wrap wrap">
            <div class="titleBox br5">消息中心</div>
            <div class="SY-mainNotify clearfix">
                <div class="notifyNav br5 tac fl">
                    <ul>
                        <li class="item pr active"><a class="db notice" href="javascript:void(0);">通知</a><span class="dot pa">2</span></li>
                        <li class="item pr"><a class="db comment" href="javascript:void(0);">评论</a><span class="dot pa">12</span></li>
                        <li class="item pr"><a class="db leaveWord" href="javascript:void(0);">留言板</a><span class="dot pa">20</span></li>
                        <li class="item pr"><a class="db letter" href="javascript:void(0);">私信</a><span class="dot pa">64</span></li>
                    </ul>
                </div>
                <div class="notifyContent br5 fr">
                    <!--通知-->
                    <div class="noticeBox">
                        <div class="tabNav">
                            <ul>
                                <li class="item dib active"><a href="javascript:void(0);">全部通知</a></li>
                                <li class="item dib"><a href="javascript:void(0);">关注</a></li>
                                <li class="item dib"><a href="javascript:void(0);">点赞</a></li>
                                <li class="item dib"><a href="javascript:void(0);">系统</a></li>
                            </ul>
                        </div>
                        <div class="noticeContent">
                            <div class="content">
                                <!--全部通知-->
                                <div class="allNotice">
                                    <div class="systemNotice clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.shenyecg.com/UploadImages/2018/6/27/2018062716531971471.png" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom">
                                                <a href="javascript:void(0);"><span class="nickName">系统通知</span></a>
                                                <span class="times"><i class="day">今天</i><i class="time">18:30</i></span>
                                            </div>
                                            <div class="text">管理员审核通过了你发布的原创作品<a href="javascript:void(0);">《路人甲》</a><br>操作原因：感谢在深夜研习社发布您的原创作品。</div>
                                        </div>
                                    </div>
                                    <div class="careNotice clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveGold"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom">
                                                <a href="javascript:void(0);"><span class="nickName">路人乙</span></a>
                                                <span class="times"><i class="day">2018-05-21</i><i class="time">18:30</i></span>
                                            </div>
                                            <div class="text">关注了你</div>
                                        </div>
                                    </div>
                                    <div class="thumbUpNotice clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveGold"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom">
                                                <a href="javascript:void(0);"><span class="nickName">路人乙</span></a>
                                                <span class="times"><i class="day">2018-05-21</i><i class="time">18:30</i></span>
                                            </div>
                                            <div class="text">赞了你的视频：<a href="javascript:void(0);">《黑豹教程》</a></div>
                                        </div>
                                    </div>
                                    <!--loading-->
                                    <div class="loading tac">
                                        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                    </div>
                                </div>
                                <!--关注-->
                                <div class="care dn">
                                    <div class="careNotice clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom">
                                                <a href="javascript:void(0);"><span class="nickName">路人乙</span></a>
                                                <span class="times"><i class="day">2018-05-21</i><i class="time">18:30</i></span>
                                            </div>
                                            <div class="text">关注了你</div>
                                        </div>
                                    </div>
                                    <!--loading-->
                                    <div class="loading tac">
                                        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                    </div>
                                </div>
                                <!--点赞-->
                                <div class="thumbUp dn">
                                    <div class="thumbUpNotice clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom">
                                                <a href="javascript:void(0);"><span class="nickName">路人乙</span></a>
                                                <span class="times"><i class="day">2018-05-21</i><i class="time">18:30</i></span>
                                            </div>
                                            <div class="text">赞了你的视频：<a href="javascript:void(0);">《黑豹教程》</a></div>
                                        </div>
                                    </div>
                                    <!--loading-->
                                    <div class="loading tac">
                                        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                    </div>
                                </div>
                                <!--系统-->
                                <div class="system dn">
                                    <div class="systemNotice clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom">
                                                <a href="javascript:void(0);"><span class="nickName">系统通知</span></a>
                                                <span class="times"><i class="day">今天</i><i class="time">18:30</i></span>
                                            </div>
                                            <div class="text">管理员审核通过了你发布的原创作品<a href="javascript:void(0);">《路人甲》</a><br>操作原因：感谢在深夜研习社发布您的原创作品。</div>
                                        </div>
                                    </div>
                                    <!--loading-->
                                    <div class="loading tac">
                                        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                    </div>
                                </div>
                            </div>
                            <!--缺省提示-->
                            <div class="emptyInfo tac dn">
                                <div class="icon"></div>
                                <p class="tips">你还没有收到新的消息通知哦~</p>
                            </div>
                        </div>
                    </div>
                    <!--评论-->
                    <div class="commentBox dn">
                        <div class="tabNav">
                            <ul>
                                <li class="item dib active"><a href="javascript:void(0);">全部评论</a></li>
                            </ul>
                        </div>
                        <div class="commentContent">
                            <div class="content">
                                <div class="recieveComment">
                                    <div class="commentList">
                                        <div class="item clearfix">
                                            <div class="avatar br50 fl">
                                                <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                                <a href="javascript:void(0);"><span class="mark db pa approveGold"></span></a>
                                            </div>
                                            <div class="msgDetail fl">
                                                <div class="msgFrom clearfix">
                                                    <p class="fl">
                                                        <a href="javascript:void(0);"><span class="nickName">路人甲</span></a>给你留言了
                                                    </p>
                                                    <a class="reply fr" href="javascript:void(0);">回复</a>
                                                </div>
                                                <p class="times"><span class="day">2018-05-22</span><span class="time">09:45:30</span></p>
                                                <p class="replyWord"><span class="txt">我只是来看看大神之间的交流</span></p>
                                                <div class="pr showWord">
                                                    <span class="pa triangle"></span>
                                                    <div class="text br5">
                                                        回复我的评论：你也很厉害
                                                    </div>
                                                </div>
                                                <div class="replyBox clearfix dn">
                                                    <input type="text" class="br5 tal" placeholder="回复Ta的：" onfocus="this.placeholder=''" onblur="this.placeholder='回复Ta的：'">
                                                    <a class="db tac br5 transition fr confirmBtn" href="javascript:void(0);">确认</a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="item clearfix">
                                            <div class="avatar br50 fl">
                                                <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                                <a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a>
                                            </div>
                                            <div class="msgDetail fl">
                                                <div class="msgFrom clearfix">
                                                    <p class="fl">
                                                        <a href="javascript:void(0);"><span class="nickName">路人甲</span></a>评论了<a href="javascript:void(0);">查看详情</a>
                                                    </p>
                                                    <a class="reply fr" href="javascript:void(0);">回复</a>
                                                </div>
                                                <p class="times"><span class="day">2018-05-22</span><span class="time">09:45:30</span></p>
                                                <p class="replyWord"><span class="txt">我只是来看看大神之间的交流</span></p>
                                                <div class="pr showWord">
                                                    <span class="pa triangle"></span>
                                                    <div class="text br5">
                                                        评论了你的作品：<a href="javascript:void(0);">《情人节礼物》</a>
                                                    </div>
                                                </div>
                                                <div class="replyBox clearfix dn">
                                                    <input type="text" class="br5 tal" placeholder="回复Ta的：" onfocus="this.placeholder=''" onblur="this.placeholder='回复Ta的：'">
                                                    <a class="db tac br5 transition fr confirmBtn" href="javascript:void(0);">确认</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--loading-->
                                    <div class="loading tac">
                                        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                    </div>
                                </div>
                            </div>
                            <!--缺省提示-->
                            <div class="emptyInfo tac dn">
                                <div class="icon"></div>
                                <p class="tips">你还没有收到任何评论哦~</p>
                            </div>
                        </div>
                    </div>
                    <!--留言板-->
                    <div class="leaveWordBox dn">
                        <div class="tabNav">
                            <ul>
                                <li class="item dib active"><a href="javascript:void(0);">全部留言</a></li>
                            </ul>
                        </div>
                        <div class="leaveWordContent">
                            <div class="leaveWordList">
                                <div class="item clearfix">
                                    <div class="avatar br50 fl">
                                        <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                        <a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a>
                                    </div>
                                    <div class="msgDetail fl">
                                        <div class="msgFrom clearfix">
                                            <p class="fl">
                                                <a href="javascript:void(0);"><span class="nickName">路人甲</span></a>给你留言了
                                            </p>
                                            <a class="reply fr" href="javascript:void(0);">回复</a>
                                        </div>
                                        <p class="times"><span class="day">2018-05-22</span><span class="time">09:45:30</span></p>
                                        <p class="replyWord"><span class="txt">这是留言的内容</span></p>
                                        <div class="replyBox clearfix dn">
                                            <input type="text" class="br5 tal" placeholder="回复Ta的：" onfocus="this.placeholder=''" onblur="this.placeholder='回复Ta的：'">
                                            <a class="db tac br5 transition fr confirmBtn" href="javascript:void(0);">确认</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="item clearfix">
                                    <div class="avatar br50 fl">
                                        <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                        <a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a>
                                    </div>
                                    <div class="msgDetail fl">
                                        <div class="msgFrom clearfix">
                                            <p class="fl">
                                                <a href="javascript:void(0);"><span class="nickName">路人甲</span></a>回复了你的留言<a href="javascript:void(0);">查看详情</a>
                                            </p>
                                            <a class="reply fr" href="javascript:void(0);">回复</a>
                                        </div>
                                        <p class="times"><span class="day">2018-05-22</span><span class="time">09:45:30</span></p>
                                        <p class="replyWord"><span class="txt">这是回复的内容</span></p>
                                        <div class="pr showWord">
                                            <span class="pa triangle"></span>
                                            <div class="text br5">
                                                路人乙：这是留言的内容
                                            </div>
                                        </div>
                                        <div class="replyBox clearfix dn">
                                            <input type="text" class="br5 tal" placeholder="回复Ta的：" onfocus="this.placeholder=''" onblur="this.placeholder='回复Ta的：'">
                                            <a class="db tac br5 transition fr confirmBtn" href="javascript:void(0);">确认</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--loading-->
                            <div class="loading tac">
                                <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                            </div>
                            <!--缺省提示-->
                            <div class="emptyInfo tac dn">
                                <div class="icon"></div>
                                <p class="tips">还没有人给你留言哦~</p>
                            </div>
                        </div>
                    </div>
                    <!--私信-->
                    <div class="letterBox dn">
                        <!--私信消息列表-->
                        <div class="letterListBox">
                            <div class="tabNav">
                                <ul>
                                    <li class="item dib active"><a href="javascript:void(0);">全部私信</a></li>
                                </ul>
                            </div>
                            <div class="letterContent">
                                <div class="letterList">
                                    <div class="item clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveBlue"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom clearfix">
                                                <p class="fl">
                                                    <a href="javascript:void(0);"><span class="nickName">路人乙</span></a>
                                                    <span class="times"><i class="time">30分钟前</i></span>
                                                </p>
                                                <p class="operate fr pr">
                                                    <i class="fa fa-angle-down transition"></i>
                                                    <a class="deleteBtn pa br5 db tac" href="javascript:void(0);">删除对话</a>
                                                </p>
                                            </div>
                                            <div class="textBox clearfix">
                                                <div class="text fl">这是该用户发给你的私信</div>
                                                <a class="reply fr" href="javascript:void(0);">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveGold"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom clearfix">
                                                <p class="fl">
                                                    <a href="javascript:void(0);"><span class="nickName">路人乙</span></a>
                                                    <span class="times"><i class="time">30分钟前</i></span>
                                                </p>
                                                <p class="operate fr pr">
                                                    <i class="fa fa-angle-down transition"></i>
                                                    <a class="deleteBtn pa br5 db tac" href="javascript:void(0);">删除对话</a>
                                                </p>
                                            </div>
                                            <div class="textBox clearfix">
                                                <div class="text fl">这是该用户发给你的私信</div>
                                                <a class="reply fr" href="javascript:void(0);">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveGold"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom clearfix">
                                                <p class="fl">
                                                    <a href="javascript:void(0);"><span class="nickName">路人乙</span></a>
                                                    <span class="times"><i class="time">30分钟前</i></span>
                                                </p>
                                                <p class="operate fr pr">
                                                    <i class="fa fa-angle-down transition"></i>
                                                    <a class="deleteBtn pa br5 db tac" href="javascript:void(0);">删除对话</a>
                                                </p>
                                            </div>
                                            <div class="textBox clearfix">
                                                <div class="text fl">这是该用户发给你的私信</div>
                                                <a class="reply fr" href="javascript:void(0);">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveGold"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom clearfix">
                                                <p class="fl">
                                                    <a href="javascript:void(0);"><span class="nickName">路人乙</span></a>
                                                    <span class="times"><i class="time">30分钟前</i></span>
                                                </p>
                                                <p class="operate fr pr">
                                                    <i class="fa fa-angle-down transition"></i>
                                                    <a class="deleteBtn pa br5 db tac" href="javascript:void(0);">删除对话</a>
                                                </p>
                                            </div>
                                            <div class="textBox clearfix">
                                                <div class="text fl">这是该用户发给你的私信这是该用户发给你的私信这是该用户发给你的私信这是该用户发给你的私信这是该用户发给你的私信这是该用户发给你的私信这是该用户发给你的私信这是该用户发给你的私信</div>
                                                <a class="reply fr" href="javascript:void(0);">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="item clearfix">
                                        <div class="avatar br50 fl">
                                            <a href="javascript:void(0);"><img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt=""></a>
                                            <a href="javascript:void(0);"><span class="mark db pa approveGold"></span></a>
                                        </div>
                                        <div class="msgDetail fl">
                                            <div class="msgFrom clearfix">
                                                <p class="fl">
                                                    <a href="javascript:void(0);"><span class="nickName">路人乙</span></a>
                                                    <span class="times"><i class="time">30分钟前</i></span>
                                                </p>
                                                <p class="operate fr pr">
                                                    <i class="fa fa-angle-down transition"></i>
                                                    <a class="deleteBtn pa br5 db tac" href="javascript:void(0);">删除对话</a>
                                                </p>
                                            </div>
                                            <div class="textBox clearfix">
                                                <div class="text fl">这是该用户发给你的私信</div>
                                                <a class="reply fr" href="javascript:void(0);">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--loading-->
                                <div class="loading tac">
                                    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                </div>
                                <!--缺省提示-->
                                <div class="emptyInfo tac dn">
                                    <div class="icon"></div>
                                    <p class="tips">你还没有收到私信哦~</p>
                                </div>
                            </div>
                        </div>
                        <!--私信对话框-->
                        <div class="letterChatBox dn">
                            <div class="tabNav tac clearfix">
                                <a class="backBtn fl" href="javascript:void(0);"><i class="fa fa-angle-left"></i></a>
                                <p class="title dib"><span class="nickName toe">路人甲</span>与你的对话</p>
                            </div>
                            <div class="chattingBox">
                                <ul>
                                    <li class="checkMoreBtn tac dn">
                                        <a href="javascript:void(0);">查看更多</a>
                                    </li>
                                    <!--loading-->
                                    <li class="loading tac">
                                        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                    </li>
                                    <!--时间-->
                                    <li class="timeTips tac"><span class="day">2018年05月22日</span><span class="time">14:23</span></li>
                                    <li class="recieveLetter tal clearfix">
                                        <div class="avatar br50 fl">
                                            <span class="mark db pa approveGold"></span>
                                            <img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                        </div>
                                        <div class="letterText br5 pr fl">
                                            <span class="pa triangle"></span>
                                            <p class="letter">这是接收到的私信内容</p>
                                        </div>
                                    </li>
                                    <li class="sendLetter tar clearfix">
                                        <div class="avatar br50 fr">
                                            <span class="mark db pa approveGold"></span>
                                            <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                        </div>
                                        <div class="letterText br5 pr fr">
                                            <span class="pa triangle"></span>
                                            <p class="letter">这是发送的私信内容</p>
                                        </div>
                                    </li>
                                    <li class="recieveLetter tal clearfix">
                                        <div class="avatar br50 fl">
                                            <span class="mark db pa approveBlue"></span>
                                            <img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                        </div>
                                        <div class="letterText br5 pr fl">
                                            <span class="pa triangle"></span>
                                            <p class="letter">这是接收到的私信内容</p>
                                        </div>
                                    </li>
                                    <li class="sendLetter tar clearfix">
                                        <div class="avatar br50 fr">
                                            <span class="mark db pa approveGold"></span>
                                            <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                        </div>
                                        <div class="letterText br5 pr fr">
                                            <span class="pa triangle"></span>
                                            <p class="letter">这是发送的私信内容</p>
                                        </div>
                                    </li>
                                    <li class="timeTips tac"><span class="day">2018年05月22日</span><span class="time">14:52</span></li>
                                    <li class="recieveLetter tal clearfix">
                                        <div class="avatar br50 fl">
                                            <span class="mark db pa approveGold"></span>
                                            <img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                        </div>
                                        <div class="letterText br5 pr fl">
                                            <span class="pa triangle"></span>
                                            <p class="letter">这是接收到的私信内容</p>
                                        </div>
                                    </li>
                                    <li class="sendLetter tar clearfix">
                                        <div class="avatar br50 fr">
                                            <span class="mark db pa approveBlue"></span>
                                            <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                        </div>
                                        <div class="letterText br5 pr fr">
                                            <span class="pa triangle"></span>
                                            <p class="letter">这是发送的私信内容</p>
                                        </div>
                                    </li>
                                    <li class="timeTips tac"><span class="day">2018年06月13日</span><span class="time">11:16</span></li>
                                    <li class="recieveLetter tal clearfix">
                                        <div class="avatar br50 fl">
                                            <span class="mark db pa approveGold"></span>
                                            <img class="br50" src="http://img.yxs.shenyecg.com/Image/CDg8sf6s33evuVtkHpzHEcXJbaOzq41y/2W74tQNZPB.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                        </div>
                                        <div class="letterText br5 pr fl">
                                            <span class="pa triangle"></span>
                                            <p class="letter">世界杯明天开幕了，你喜欢哪支球队啊？</p>
                                        </div>
                                    </li>
                                    <li class="sendLetter tar clearfix">
                                        <div class="avatar br50 fr">
                                            <span class="mark db pa approveGold"></span>
                                            <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                        </div>
                                        <div class="letterText br5 pr fr">
                                            <span class="pa triangle"></span>
                                            <p class="letter">我还是一如既往的支持德国队...</p>
                                        </div>
                                    </li>
                                    <!--loading-->
                                    <li class="loading tac">
                                        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                    </li>
                                </ul>
                            </div>
                            <div class="writeLetter disable clearfix">
                                <div class="avatar br50 fl">
                                    <span class="mark db pa approveGold"></span>
                                    <img class="br50" src="http://img.yxs.shenyecg.com/Image/h8VE1fiHlWerj0FrkEUSYlLa4m3sppLi/KECAnarYPG.jpg?x-oss-process=image/resize,m_fill,limit_0,w_200,h_200" alt="">
                                </div>
                                <div class="inputField border1 br5 fl pr">
                                    <input type="text">
                                    <span class="wordsLimit pa"><i class="warning">350</i>/300</span>
                                </div>
                                <a class="sendBtn db br5 transition tac fl" href="javascript:void(0);">发送</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--主内容 结束-->
<!--页脚 开始-->
<div class="SY-footer">
    <div class="SY-foot clearfix">
        <div class="aboutUs fl">
            <div class="logoBox">
                <img src="img/icons/bottomLogo.png" alt="">
                <p class="dib slogin">深夜研习社</p>
                <span class="line dib"></span>
                <p class="dib text">知识应该受到尊重</p>
            </div>
            <div class="connectUs">
                <p class="text dib">联系我们:<span class="phoneNumer dib">027-62438159</span></p>
                <a href="javascript:void(0);" class="tencent linkIcon"></a>
            </div>
        </div>
        <div class="msgDetail fr clearfix">
            <ul class="iconList fr">
                <li class="pr">
                    <span class="wechat linkIcon"></span>
                    <div class="weChatCode tac pa">
                        <i class="icon-arrow-down pa"></i>
                        <p class="scan">扫描二维码</p>
                        <p class="text">关注微信公众号</p>
                        <img src="img/icons/WeChatCode.jpg" alt="">
                    </div>
                </li>
                <li><a href="javascript:void(0);" class="sina linkIcon"></a></li>
            </ul>
            <dl class="fr">
                <dt><a href="HelpCenter.html">关于我们</a></dt>
            </dl>
            <dl class="fr">
                <dt><a href="HelpCenter.html">服务条款</a></dt>
            </dl>
            <dl class="fr">
                <dt><a href="HelpCenter.html">版权申明</a></dt>
            </dl>
            <dl class="fr">
                <dt><a href="HelpCenter.html">常见问题</a></dt>
            </dl>
            <p class="recordNumber"><a href="javascript:void(0);">Copyright&copy; www.shenyecg.com 2017 | 鄂ICP备16021987号-1</a></p>
        </div>
    </div>
</div>
<!--页脚 结束-->
<script src="js/jquery.min.js"></script>
<script src="js/search.js"></script>
<script>
    $(function () {
        //左侧导航切换
        $(".notifyNav .item a").click(function () {
            var nav_index = $(this).parent().index();
            $(this).parent().addClass("active").siblings().removeClass("active");
            $(".notifyContent > div").eq(nav_index).removeClass("dn").siblings().addClass("dn");
        });

        //通知右侧头部导航切换
        $(".noticeBox .tabNav .item").click(function () {
            var tab_index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".noticeContent .content > div").eq(tab_index).removeClass("dn").siblings().addClass("dn");
        });

        //回复留言显示与隐藏
        $(".leaveWordContent .msgFrom .reply").click(function () {
            $(this).parents(".msgDetail").find(".replyBox").slideDown();
        });
        $(".leaveWordContent .replyBox .confirmBtn").click(function () {
                $(this).parent().slideUp();
        });

        //评论右侧头部导航切换
        $(".commentBox .tabNav .item").click(function () {
            var tab_index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".commentContent .content > div").eq(tab_index).removeClass("dn").siblings().addClass("dn");
        });
        //回复评论显示与隐藏
        $(".commentContent .msgFrom .reply").click(function () {
            $(this).parents(".msgDetail").find(".replyBox").slideDown();
        });
        $(".commentContent .replyBox .confirmBtn").click(function () {
            $(this).parent().slideUp();
        });

        //私信回复按钮点击事件
        $(".notifyContent .letterListBox .item .reply").click(function () {
            $(this).parents(".letterListBox").addClass("dn").siblings(".letterChatBox").removeClass("dn");
        });
        //私信对话框 返回按钮点击事件
        $(".notifyContent .letterChatBox .backBtn").click(function () {
            $(this).parents(".letterChatBox").addClass("dn").siblings(".letterListBox").removeClass("dn");
        });

        //私信对话框 获取光标 & 失去光标 事件
        $(".notifyContent .letterChatBox input").focus(function () {
            $(this).parents(".writeLetter").removeClass("disable");
        });
        $(".notifyContent .letterChatBox input").blur(function () {
            $(this).parents(".writeLetter").addClass("disable");
        })

    });
</script>
</body>
</html>